<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            /* background: black; */
            background: url('images/231048c3pvghcz1dhcigfc.jpg');
        }
        
        #app {
            width: 400px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            margin-top: 50px;
            color: bisque;
            font-family: 楷体;
            margin-bottom: 20px;
        }
        
        ul>li.li_style {
            float: left;
            list-style: none;
            width: 380px;
            height: 50px;
            text-align: left;
            padding-left: 20px;
            background: beige;
            cursor: pointer;
            border-bottom: 2px solid slategrey;
            line-height: 50px;
            position: relative;
        }
        
        ul>.li_style:hover {
            background: rgba(255, 255, 255, 0.7);
        }
        
        ul>.li_style:hover::before {
            content: '×';
            font-size: 30px;
            color: black;
            right: 15px;
            position: absolute;
        }
        
        ul {
            width: 400px;
            float: left;
        }
        
        #search {
            border: none;
            background-color: beige;
            width: 400px;
            font-size: 25px;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            outline: none;
            text-align: center;
            height: 50px;
        }
        
        #buttons {
            position: relative;
            float: left;
            list-style: none;
            width: 380px;
            height: 40px;
            text-align: left;
            padding-left: 20px;
            cursor: pointer;
            background: beige;
            line-height: 40px;
        }
        
        #buttons>span {
            font-size: 10px;
        }
        
        .buttons_div:nth-child(1) {
            position: absolute;
            width: 380px;
            height: 8px;
            border: 1px solid silver;
            right: 10px;
            bottom: -8px;
            background: beige;
        }
        
        .buttons_div:nth-child(2) {
            position: absolute;
            width: 392px;
            height: 4px;
            border: 1px solid silver;
            right: 5px;
            bottom: -3.5px;
            background: beige;
        }
        
        #clean {
            float: right;
            margin-right: 10px;
        }
        
        #clean:hover {
            text-decoration: underline;
        }
    </style>

</head>

<body>


    <div id="app">
        <h1>小涵记事本</h1>
        <input id="search" placeholder="请输入内容" type="text" @keyUp="enterDown" autocomplete="off">
        <ul>
            <li @click="liClick(index)" v-for='(m,index) in msg' class="li_style">{{index+1}}.{{m}}</li>
            <li id="buttons" v-if="total != 0">
                <span :total="total">{{total}}个</span>
                <span id="clean" v-on:click="clear">clean</span>
                <div style="backdrop-filter: blur(20px);">
                    <div class="buttons_div"></div>
                    <div class="buttons_div"></div>
                </div>
            </li>
        </ul>
    </div>


</body>

<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: ['吃饭', '睡觉', '打豆豆'],
        },
        computed: {
            // 计算总数
            total() {
                return this.msg.length;
            }
        },
        methods: {
            clear() {
                this.msg.splice(0, this.msg.length);

            },
            enterDown() {
                if (event.keyCode === 13) {
                    this.msg.push(event.target.value);
                }
            },
            liClick(index) {
                this.msg.splice(index, 1);
            },
        },
    })
</script>